<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Touchdown game: {{game}}</title> 

        <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript"> 
        // making this a global variable so that it is accessible for
        // debugging/inspecting in Firebug
        var map = null;
 
        function init(){
 
            map = new OpenLayers.Map('map');
 
            var ol_wms = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'}
            );
 
            var jpl_wms = new OpenLayers.Layer.WMS(
                "NASA Global Mosaic",
                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
                {layers: "landsat7"}
            );

            // allow testing of specific renderers via "?renderer=Canvas", etc
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

            var game_points = new OpenLayers.Layer.Vector("Simple Geometry", {
                styleMap: new OpenLayers.StyleMap({'default':{
                    strokeColor: "#00FF00",
                    strokeOpacity: 1,
                    strokeWidth: 3,
/*                    fillColor: "#FF5500",
                    fillOpacity: 0.5,
*/                  pointRadius: 1,
                    pointerEvents: "visiblePainted",
                    label : "${value}",
                    
                    fontColor: "${favColor}",
                    fontSize: "12px",
                    fontFamily: "Courier New, monospace",
                    fontWeight: "bold",
                    labelAlign: "${align}"
                }}),
                renderers: renderer
            });

			{% for point in game.gamepoint_set.all %}
                var point{{point.id}} = new OpenLayers.Geometry.Point({{point.point.x}}, {{point.point.y}});
                var point{{point.id}}Feature = new OpenLayers.Feature.Vector(point{{point.id}});
				point{{point.id}}Feature.attributes = {
                value: "{{point.value}}",
				name: "{{point.name}}",				
                favColor: "black",
                align: "rt"
            };
			{% endfor %}
			
			var playing_field = new OpenLayers.Bounds({{game.northwest_corner.x}},{{game.northwest_corner.y}},{{game.southeast_corner.x}},{{game.southeast_corner.y}}).toGeometry();
			var playing_field_feature = new OpenLayers.Feature.Vector(playing_field);

			game_points.addFeatures([{%for point in game.gamepoint_set.all%}point{{point.id}}Feature, {%endfor%}]);

			game_points.setVisibility(true);
            map.addLayers([ol_wms, jpl_wms, game_points]);
            selectControl = new OpenLayers.Control.SelectFeature(
                [game_points],
                {
                    clickout: true, toggle: false,
                    multiple: false, hover: false,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey" // shift key adds to selection
                }
            );
            map.addControl(selectControl);
            selectControl.activate();
            map.addControl(new OpenLayers.Control.LayerSwitcher());
			map.zoomToExtent(game_points.getDataExtent());
            game_points.events.on({
                "featureselected": function(e) {
                    showStatus("<a href={%url claim_touchdown%}>Claim a touchdown on point" + e.feature.attributes.name + "</a>" );
                },
                "featureunselected": function(e) {
                    showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
                }
            });

        }

        function showStatus(text) {
            document.getElementById("status").innerHTML = text;            
        }

    </script> 
  <style type="text/css">
<!--u
#map {
	width: 20%;
}
#title {
	display: inline;
}
.game_details {

}
.game_actions {

}
-->
  </style>
  </head> 
  <body onLoad="init()"> 
    <h1 id="title">Touchdown game {{game.id}}: {{game}}</h1> 
    <p> 
    <div class="game_details">
        Game details:
        <ul>
        <li>Contains {{game.gamepoint_set.count}} points. [<a href={{game.download_gpx}}>Download for GPS</a>]{%if user.is_staff%}<a href=<url reset_points game>>Redraw game points</a>{%endif%}</li>        
        <li>
        In play from {{game.start_date}} to {{game.end_date}}.
        {%if game.time_left%}{{game.time_left}} remaining.{%else%} Now ended. {%endif%}
		{%if game.time_until%}{{game.time_until}} until game begins.{%endif%}        
        </li>
        <li>{{game.player.count}} players {%if user.is_authenticated%}, counting you, {{user}}{%endif%}</li>
        <li></li>
        </ul>
    </div>

	<div class="game_actions">	                
        Actions:
        <ul>
        <li><a href="">Join this game</a></li>
        <li><a href="">Claim a touchdown</a></li>
        {%ifequal user.is_authenticated 0%}<li><a href="">Login to view your score</a></li>{%endifequal%}    
        </ul>

		{% if user.is_authenticated %}
		Your score: <work out score>
		{% endif %}        
	</div>                
    </p> 
    <div id="map" class="gamemap"></div> 
    <div id="status"></div>
  </body> 
</html>